import { Menu } from "antd";
import { useLocation, useNavigate } from "react-router-dom";
import { HomeOutlined, UserOutlined } from "@ant-design/icons";
import "./index.less";

const MMenu = () => {
  // 创建路由定位钩子
  const location = useLocation();
  // 创建路由钩子
  const navigate = useNavigate();
  // 定义导航栏
  const menuItems = [
    {
      // 导航显示的名称
      label: "首页",
      // 导航唯一标识，为便于当前态的显示，与当前路由保持一致
      key: "/home",
      // 导航的前置图标
      icon: <HomeOutlined />,
      // 点击跳转行为
      onClick: () => {
        navigate("/home");
      },
    },
    {
      label: "图片处理",
      key: "/handelImage",
      icon: <UserOutlined />,
      onClick: () => {
        navigate("/handelImage");
      },
    },
    {
      label: "变装",
      key: "/crossDress",
      icon: <UserOutlined />,
      onClick: () => {
        navigate("/crossDress");
      },
    },
  ];
  return (
    <div className="menu-con">
      <Menu
        mode="inline"
        rootClassName="inner-menu"
        selectedKeys={[location.pathname]}
        items={menuItems}
      />
    </div>
  );
};
export default MMenu;
